import { Picker, Icon, DatePicker } from 'antd-mobile';
import React, { Component } from 'react';
import { SelectionType } from '../../utils/common';
import './DataPicker.scss';

interface PickerProps {
    graphSelections: SelectionType[][];
    className?: string;
    isCascade?: boolean;
    pickerType: boolean;
}

const CustomChildren = (props: { onClick?: () => void, extra?: string }) => (
    <span onClick={props.onClick} style={{ fontSize: '15px', color: '#53A5B0' }}>
        {props.extra!.replace(/,/g, ' ')}
        < Icon type="down" size="xxs" />
    </span>
);

const DatePickerChildren = (props: { onClick?: () => void, extra?: string, children?: string }) => {
    let dateString: string = '';
    // 格式化日期
    props.extra!.split('-').forEach((ele: string, index: number) => {
        if (index === 0) {
            dateString += (ele + '年');
        } else if (index === 1) {
            dateString += (ele + '月');
        }
    });
    return (
        <span onClick={props.onClick} style={{ fontSize: '15px', color: '#53A5B0' }}>
            {
                dateString
            }
            < Icon type="down" size="xxs" />
        </span>
    );
};

export default class DataPicker extends Component<PickerProps> {
    state = {
        curValue: this.props.graphSelections.map((v: SelectionType[]) => (v[0].value))
    };
    render(): JSX.Element {
        return (
            <span className={`graph-picker ${this.props.className}`}>
                {
                    this.props.pickerType ?
                        (<Picker
                            data={this.props.graphSelections}
                            title="选择日期"
                            cascade={this.props.isCascade}
                            cols={this.props.graphSelections.length}
                            value={this.state.curValue}
                            // 预留数据介入时用回调
                            
                            // onPickerChange={
                            //     this.pickerChange
                            // }
                            // onChange={
                            //     this.change
                            // }
                            onOk={
                                el => {
                                    this.setState({ curValue: el });
                                }}
                        >
                            <CustomChildren />
                        </Picker>
                        ) :
                        (
                            <DatePicker
                                mode="date"
                                minDate={new Date('2017-1-1')}
                                maxDate={new Date()}
                                value={new Date()}
                            >
                                <DatePickerChildren />
                            </DatePicker>
                        )
                }
            </span>
        );
    }
}